<template>
  <!-- 全职 -->
  <div class="bg" v-cloak>
    <Meta pagealias="campusjoblist" :query_data="$route.query" />
    <Head>全职</Head>
    <div class="box_1">
        <div class="content"  @click="toggleSearch">
          <div class="search_ico">
            {{ params.keyword === "" ? "请输入关键字" : params.keyword }}
          </div>
        </div>
    </div>

    <van-popup v-model="show" position="top" :style="{ height: '90%' }">
      <TopSearch type="campus" @hideSearch="toggleSearch" @doSearch="doSearchByKeyword"></TopSearch>
    </van-popup>

    <van-dropdown-menu>
      <van-dropdown-item :title='districtTitle' ref="dropDistrict" :lock-scroll="false" @opened="openedDistrict" @closed="closedDistrict">
        <DistrictFilter :districts="[params.district1, params.district2, params.district3]" :type="true" @doSearch="doSearchByDistrict"></DistrictFilter>
      </van-dropdown-item>
      <van-dropdown-item :title='categoryTitle' ref="dropCategory" @opened="openedCategory" @closed="closedCategory">
        <JobCategoryFilter :categories="[params.category1, params.category2, params.category3]" :type="true" @doSearch="doSearchByCategory"></JobCategoryFilter>
      </van-dropdown-item>
      <van-dropdown-item :title='wageTitle' v-model="optionWage" :options="optionFilterWage"  @change="handleWage"></van-dropdown-item>
      <van-dropdown-item :title='otherTitle' ref="dropMore">
         <div class="more_box">
            <div class="item_wrapper">
              <div class="item_title">学历要求</div>
              <div class="item_group">
                <div :class="item.select ? 'item selected' : 'item'" v-for="(item, index) in optionEducation" :key="index" @click="optionEducation = restructureData(optionEducation, item.id, 'education')">{{item.text}}</div>
                <div class="clear"></div>
              </div>
              <div class="item_title">工作经验</div>
              <div class="item_group">
                <div :class="item.select ? 'item selected' : 'item'" v-for="(item, index) in optionExperience" :key="index" @click="optionExperience = restructureData(optionExperience, item.id, 'experience')">{{item.text}}</div>
                <div class="clear"></div>
              </div>
              <div class="item_title">福利待遇</div>
              <div class="item_group">
                <div :class="item.select ? 'item selected' : 'item'" v-for="(item, index) in optionJobTag" :key="index" @click="handleCheckJobTag(item)">
                  {{item.text}}
                </div>
                <div class="clear"></div>
              </div>
              <div class="item_title">更新时间</div>
              <div class="item_group">
                <div :class="item.select ? 'item selected' : 'item'" v-for="(item,index) in optionSettr" :key="index" @click="optionSettr = restructureData(optionSettr, item.id, 'settr')">
                  {{item.text}}
                </div>
                <div class="clear"></div>
              </div>
              <div class="wrapper_bottom">
                <div class="btn_c" @click="handleClearMore()">清空</div>
                <div class="btn_c blue" @click="handleSelectMore()">确定</div>
              </div>
            </div>
          </div>
      </van-dropdown-item>
    </van-dropdown-menu>

    <van-empty image="search" description="没有找到对应的数据"  style="background-color:#fff" v-if="show_empty === true" />
    <van-list v-model="loading" :finished='finished' @load="onLoad" :finished-text='finishedText' :immediate-check="false" v-if="dataset.length > 0">
      <div class="full_time">
        <div :class="dataset.length > pagesize ? 'full_time_list full_time_pd2' : 'full_time_list full_time_pd1'">
          <RullTimeItem :dataset="dataset"></RullTimeItem>
        </div>
      </div>
    </van-list>
    <div class="height" v-if="dataset.length >= 4"></div>
    <BottomNav></BottomNav>
  </div>
</template>
<script>
import BottomNav from '../components/BottomNav.vue'
import FilterOption from '../components/filterOption.vue'
import RullTimeItem from '../components/FullTimeItem.vue'
import DistrictFilter from '@/components/DistrictFilter.vue'
import JobCategoryFilter from '@/components/JobCategoryFilter'
import http from '@/utils/http.js'
import api from '@/api.js'
import { obj2Param } from '@/utils/index'
export default {
  components: {
    BottomNav,
    FilterOption,
    RullTimeItem,
    DistrictFilter,
    JobCategoryFilter
  },
  data () {
    return {
      show: false,
      districtTitle: '地区',
      categoryTitle: '职位',
      wageTitle: '薪资',
      otherTitle: '其他',
      optionEducation: [],
      optionExperience: [],
      optionJobTag: [],
      selectJobTag: [],
      dataset: [],
      page: 1,
      pagesize: 10,
      finished: false,
      loading: false,
      finishedText: '',
      show_empty: false,
      optionWage: '',
      params: {
        keyword: '',
        district1: '',
        district2: '',
        district3: '',
        category1: '',
        category2: '',
        category3: '',
        education: '',
        experience: '',
        minwage: '',
        maxwage: '',
        filter_apply: '',
        nature: '',
        tag: '',
        settr: ''
      },
      optionFilterWage: [
        { text: '不限', value: 0, min: '', max: '' },
        { text: '1000元以下', value: 1, min: 0, max: 1000 },
        { text: '1000-2000元', value: 2, min: 1000, max: 2000 },
        { text: '2000-3000元', value: 3, min: 2000, max: 3000 },
        { text: '3000-5000元', value: 4, min: 3000, max: 5000 },
        { text: '5000-8000元', value: 5, min: 5000, max: 8000 },
        { text: '8000-12000元', value: 6, min: 8000, max: 12000 },
        { text: '12000-15000元', value: 7, min: 12000, max: 15000 },
        { text: '15000元以上', value: 8, min: 15000, max: '' }
      ],
      optionSettr: [
        { text: '3天内', id: 3 },
        { text: '7天内', id: 7 },
        { text: '15天内', id: 15 },
        { text: '30天内', id: 30 }
      ]
    }
  },
  watch: {
    $route (to, from) {
      // 对路由变化作出响应...
      if (from.name !== 'campusFullTimeShow' && to.name === 'campusFullTime') {
        // 将地址栏中的url参数初始化到参数对象中
        this.initQuery(to.query)
        this.fetchData(true)
        // 恢复筛选条件
        this.restoreFilter()
      }
    }
  },
  created () {
    this.initQuery(this.$route.query)
    this.fetchData(true)
    this.$store.dispatch('getClassify', 'citycategory')
    this.$store.dispatch('getClassify', 'jobcategory')
    this.$store.dispatch('getClassify', 'education').then(() => {
      this.optionEducation = this.restructureData(
        this.$store.state.classifyEdu,
        '',
        'education'
      )
      this.restoreFilter()
    })
    this.$store.dispatch('getClassify', 'experience').then(() => {
      this.optionExperience = this.restructureData(
        this.$store.state.classifyExperience,
        '',
        'experience'
      )
      this.restoreFilter()
    })
    this.$store.dispatch('getClassify', 'jobTag').then(() => {
      // 重构福利待遇
      let storeJobTag = JSON.parse(
        JSON.stringify(this.$store.state.classifyJobTag)
      )
      storeJobTag = storeJobTag.map(function (item) {
        return { id: item.id, text: item.text, select: false }
      })
      storeJobTag.unshift({ id: '', text: '全部', select: true })
      this.optionJobTag = storeJobTag
      this.restoreFilter()
    })
  },
  mounted () {
    this.optionSettr = this.restructureData(this.optionSettr, '', 'settr')
    this.restoreFilter()
  },
  methods: {
    // 搜索弹窗切换
    toggleSearch () {
      this.show = !this.show
    },
    // 获取数据
    fetchData (init) {
      this.show_empty = false
      let conditions = { ...this.params }
      if (init === true) {
        this.page = 1
        this.finishedText = ''
        this.finished = false
      }
      conditions.page = this.page
      conditions.pagesize = this.pagesize
      http.get(api.campus_job, conditions).then((res) => {
        if (init === true) {
          this.dataset = [...res.data.items]
        } else {
          this.dataset = this.dataset.concat(res.data.items)
        }
        this.loading = false
        if (res.data.items.length < this.pagesize) {
          this.finished = true
          if (init === false) {
            this.finishedText = '没有更多了'
          } else if (res.data.items.length === 0) {
            this.show_empty = true
          }
        }
      }).catch(() => {})
    },
    // 上拉加载
    onLoad () {
      this.page++
      this.fetchData(false)
    },
    // 地区筛选
    doSearchByDistrict (data) {
      this.doSearch({
        district1: data.district1,
        district2: data.district2,
        district3: data.district3
      })
      this.districtTitle = data.districtName
      this.$refs.dropDistrict.toggle()
    },
    // 职位筛选
    doSearchByCategory (data) {
      this.doSearch({
        category1: data.category1,
        category2: data.category2,
        category3: data.category3
      })
      this.categoryTitle = data.categoryName
      this.$refs.dropCategory.toggle()
    },
    // 薪资筛选
    handleWage (value) {
      let thisWage = this.optionFilterWage.filter((item) => {
        return parseInt(item.value) === value
      })
      this.params.maxwage = thisWage[0].max
      this.params.minwage = thisWage[0].min
      this.wageTitle = thisWage[0].text
      this.doSearch({
        minwage: this.params.minwage,
        maxwage: this.params.maxwage
      })
    },
    // 福利待遇多选
    handleCheckJobTag (item) {
      if (item.id) {
        if (this.selectJobTag.includes(item.id)) {
          this.selectJobTag.splice(
            this.selectJobTag.findIndex(
              (v) => {
                return parseInt(v.id) === parseInt(item.id)
              }
            ),
            1
          )
        } else {
          if (this.selectJobTag.length >= 5) {
            this.$toast('福利待遇最多可选5个')
          } else {
            this.selectJobTag.push(item.id)
          }
        }
        let _this = this
        this.optionJobTag = this.optionJobTag.map(function (item) {
          return {
            id: item.id,
            text: item.text,
            select: _this.selectJobTag.includes(item.id)
          }
        })
      } else {
        this.selectJobTag = []
        this.optionJobTag = this.optionJobTag.map(function (item, index) {
          return { id: item.id, text: item.text, select: index === 0 }
        })
      }
      this.params.tag = this.selectJobTag.join(',')
    },
    // 筛选其他确认按钮
    handleSelectMore () {
      this.doSearch({
        education: this.params.education,
        experience: this.params.experience,
        tag: this.params.tag,
        settr: this.params.settr
      })
      this.$refs.dropMore.toggle()
    },
    // 筛选其他清空按钮
    handleClearMore () {
      this.params.education = ''
      this.params.experience = ''
      this.params.tag = ''
      this.params.settr = ''
      this.optionEducation = this.restructureData(
        this.$store.state.classifyEdu,
        '',
        'education'
      )
      this.optionExperience = this.restructureData(
        this.$store.state.classifyExperience,
        '',
        'experience'
      )
      this.optionJobTag = this.optionJobTag.map(function (item, index) {
        return { id: item.id, text: item.text, select: index === 0 }
      })
      this.optionSettr = this.restructureData(this.optionSettr, '', 'settr')
      this.handleSelectMore()
    },
    // 筛选搜索
    doSearch (data) {
      for (const key in data) {
        if (this.params.hasOwnProperty(key)) {
          this.params[key] = data[key]
        }
      }
      this.page = 1
      this.$router.push('/campus/job' + obj2Param(this.params, '?'))
    },
    // 恢复地区选择
    restoreDistrict () {
      let queryData = this.$route.query
      if (queryData['district1']) {
        this.params.district1 = queryData['district1']
        this.params.district2 = queryData['district2']
        this.params.district3 = queryData['district3']
        let storeCity = this.$store.state.classifyCityOriginal
        let selectText = []
        let topItem = storeCity.filter((v) => {
          return parseInt(v.value) === parseInt(this.params.district1)
        })[0]
        selectText.push(topItem.label)
        if (topItem.children.length) {
          if (parseInt(this.params.district2)) {
            let secondItem = topItem.children.filter((v) => {
              return parseInt(v.value) === parseInt(this.params.district2)
            })[0]
            selectText.push(secondItem.label)
            if (secondItem.children.length) {
              if (parseInt(this.params.district3)) {
                let lowestItem = secondItem.children.filter((v) => {
                  return parseInt(v.value) === parseInt(this.params.district3)
                })[0]
                selectText.push(lowestItem.label)
              } else {
                selectText.push(`全${selectText[selectText.length - 1]}`)
              }
            }
          } else {
            selectText.push(`全${selectText[selectText.length - 1]}`)
          }
        }
        this.districtTitle = selectText[selectText.length - 1]
      } else {
        this.params.district1 = ''
        this.params.district2 = ''
        this.params.district3 = ''
        this.districtTitle = '地区'
      }
    },
    // 恢复职位选择
    restoreJobCategory () {
      let queryData = this.$route.query
      if (queryData['category1']) {
        this.params['category1'] = queryData['category1']
        this.params['category2'] = queryData['category2']
        this.params['category3'] = queryData['category3']
        let storeCategory = this.$store.state.classifyJobCategory
        let selectText = []
        let topItem = storeCategory.filter((v) => {
          return parseInt(v.id) === parseInt(this.params.category1)
        })[0]
        selectText.push(topItem.text)
        if (topItem.children.length) {
          if (parseInt(this.params.category2)) {
            let secondItem = topItem.children.filter((v) => {
              return parseInt(v.id) === parseInt(this.params.category2)
            })[0]
            selectText.push(secondItem.text)
            if (secondItem.children.length) {
              if (parseInt(this.params.category3)) {
                let lowestItem = secondItem.children.filter((v) => {
                  return parseInt(v.id) === parseInt(this.params.category3)
                })[0]
                selectText.push(lowestItem.text)
              } else {
                selectText.push(`全${selectText[selectText.length - 1]}`)
              }
            }
          } else {
            selectText.push(`全${selectText[selectText.length - 1]}`)
          }
        }
        this.categoryTitle = selectText[selectText.length - 1]
      } else {
        this.params.category1 = ''
        this.params.category2 = ''
        this.params.category3 = ''
        this.categoryTitle = '职位'
      }
    },
    // 恢复薪资选择
    restoreWage () {
      let queryData = this.$route.query
      if (queryData['minwage']) {
        let thisWage = this.optionFilterWage.filter((v) => {
          return parseInt(v.min) === parseInt(queryData['minwage'])
        })[0]
        this.optionWage = thisWage.value
        this.wageTitle = thisWage.text
      } else {
        this.optionWage = ''
        this.wageTitle = '薪资'
      }
    },
    // 恢复学历要求选择
    restoreEducation () {
      let queryData = this.$route.query
      let thisEducation = ''
      if (queryData['education'] && this.optionEducation) {
        thisEducation = queryData['education']
      }
      this.optionEducation = this.restructureData(this.optionEducation, thisEducation, 'education')
    },
    // 恢复工作经验选择
    restoreExperience () {
      let queryData = this.$route.query
      let thisExperience = ''
      if (queryData['experience'] && this.optionEducation) {
        thisExperience = queryData['experience']
      }
      this.optionExperience = this.restructureData(this.optionExperience, thisExperience, 'experience')
    },
    // 恢复福利待遇选择
    restoreJobTag () {
      let queryData = this.$route.query
      if (queryData['tag'] && this.optionJobTag) {
        this.selectJobTag = queryData['tag'].split(',')
        this.selectJobTag = this.selectJobTag.map(function (item) {
          return parseInt(item)
        })

        let _this = this
        this.optionJobTag = this.optionJobTag.map(function (item) {
          return {
            id: item.id,
            text: item.text,
            select: _this.selectJobTag.includes(item.id)
          }
        })
      } else {
        this.optionJobTag = this.optionJobTag.map(function (item, index) {
          return { id: item.id, text: item.text, select: index === 0 }
        })
      }
    },
    // 恢复更新时间选择
    restoreTimeOption () {
      let queryData = this.$route.query
      let resetSettr = ''
      if (queryData['settr']) {
        resetSettr = queryData['settr']
      }
      this.optionSettr = this.restructureData(this.optionSettr, resetSettr, 'settr')
    },
    // 恢复筛选其他选择
    restoreFilter () {
      this.restoreDistrict()
      this.restoreJobCategory()
      this.restoreWage()
      this.restoreEducation()
      this.restoreExperience()
      this.restoreJobTag()
      this.restoreTimeOption()
    },
    // 关键字搜索
    doSearchByKeyword (data) {
      for (const key in this.params) {
        this.params[key] = ''
      }
      this.params.keyword = data.keyword
      this.page = 1
      this.$router.push('/campus/job' + obj2Param(this.params, '?'))
    },
    // 地区筛选打开之后给筛选组件赋值
    openedDistrict () {
      this.$refs.dropDistrict.$children[0].$children[0].initData()
      setTimeout(() => {
        this.setComponentAttribute(this.$refs.dropDistrict)
      }, 300)
    },
    closedDistrict () {
      this.$refs.dropDistrict.$children[0].$children[0].handleCityOverlay()
    },
    // 职位分类筛选打开之后给筛选组件赋值
    openedCategory () {
      this.$refs.dropCategory.$children[0].$children[0].initData()
      setTimeout(() => {
        this.setComponentAttribute(this.$refs.dropCategory)
      }, 300)
    },
    closedCategory () {
      this.$refs.dropCategory.$children[0].$children[0].handleSecondOverlay()
    },
    // 设置地区职位筛选组件高度
    setComponentAttribute (component) {
      if (component.$children[0]) {
        let thisHeight = component.$children[0].$el.clientHeight
        component.$children[0].$children[0].layHeight = thisHeight
        let offTop = component.$el.offsetTop
        component.$children[0].$children[0].offTop = parseInt(parseInt(offTop) + parseInt(thisHeight) / 2)
      }
    },
    initQuery (query) {
      for (const key in this.params) {
        if (query.hasOwnProperty(key)) {
          this.params[key] = query[key]
        } else {
          this.params[key] = ''
        }
      }
    },
    // 重构数据
    restructureData (data, id, type) {
      let restoreArray = data
      let existSub = restoreArray.findIndex(v => {
        return v.id === ''
      })
      if (existSub === -1) {
        // 防止重复添加
        restoreArray.unshift({ id: '', text: '全部' })
      }
      if (type === 'education') {
        // 学历要求
        this.params.education = id
      } else if (type === 'experience') {
        // 工作经验
        this.params.experience = id
      } else if (type === 'tag') {
        // 福利待遇
        this.params.tag = id
      } else if (type === 'settr') {
        // 更新时间
        this.params.settr = id
      }
      restoreArray = restoreArray.map(function (item, index) {
        let iSelect = false
        if (id) {
          // 标记选中项
          iSelect = parseInt(item.id) === parseInt(id)
        } else {
          // 无选中项，选中全部
          iSelect = index === 0
        }
        return { id: item.id, text: item.text, select: iSelect }
      })
      return restoreArray
    }
  }
}
</script>
<style lang="scss" scoped>
.height {
  height: 53px;
}
.height2 {
  height: 25px;
}

.bg {
  background:#f6f9fc;
}

.box_1 {
  .content {
    .search_ico {
      font-size: 12px;
      color: #c9c9c9;
      padding: 10px 0 10px 23px;
      background: url("../../../assets/images/search_ico_gray.svg") 0 center no-repeat;
      background-size: 15px;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      line-height: normal;
    }
    position: relative;
    width: 340px;
    height: 37px;
    margin: 0 auto;
    background-color: #f8f8f8;
    text-align: center;
    border-radius: 36px;
  }
  width: 100%;
  background-color: #ffffff;
  padding-top: 11px;
}

/* 全职 */
.full_time {
  margin: 0 0.19rem;
}
.full_time .full_time_title {
  color: #333333;
  font-size: 18px;
  font-weight: bold;
  position: relative;
  padding: 18.5px 0;
}
.full_time .full_time_title::after {
  content: "";
  width: 20.5px;
  height: 5px;
  background-image: linear-gradient(#01d088, #07ddb7);
  position: absolute;
  bottom: 10px;
  left: 7.5px;
  border-radius: 2.5px;
}

.full_time .full_time_pd1 {
  padding: 10px 0 ;
}

.full_time .full_time_pd2 {
  padding: 10px 0 0;
}
// 其他筛选
.more_box {
  .item_wrapper {
    .item_group {
      .item {
        &.selected {
          background-color: #e5f1ff;
          color: #5da9fc;
        }
        display: block;
        float: left;
        width: 81px;
        margin: 0 7px 10px 0;
        text-align: center;
        background-color: #f4f4f4;
        font-size: 13px;
        padding: 6.5px 0;
        &:nth-of-type(4n) {
          margin-right: 0;
        }
      }
    }
    .item_title {
      padding: 15px 0;
      font-size: 15px;
      color: #333333;
    }
    padding: 0 15px;
    position: relative;
    .wrapper_bottom {
      .btn_c {
        &.blue {
          background-color: #1787fb;
          color: #ffffff;
        }
        flex: 1;
        background-color: #f4f4f4;
        color: #333333;
        font-size: 15px;
        text-align: center;
        padding: 10.5px 0;
      }
      position: fixed;
      left: 0;
      top: 79%;
      display: flex;
      width: 100%;
      z-index: 3;
    }
  }
  position: relative;
  padding-bottom: 41px;
}
</style>
